<template>
	<view>
		<navbox title="添加相册"></navbox>
		<view style="margin-top: 190rpx;">
			<u--textarea v-model="pDesc" placeholder="请输入相册名称" border="surround"></u--textarea>

			<view style="background-color: #fff;margin-top: 20rpx">
				<u-cell-group style="">
					<u-cell size="large" title="权限" :value="status" isLink @click="quanxian()"></u-cell>
					<u-cell size="large" title="主题" :value="tabList[0]" isLink @click="show=true"></u-cell>
				</u-cell-group>
				<view
					style="display: flex;align-items: center;justify-content: space-between;margin-left: 29rpx;margin-right: 28rpx;margin-top: 20rpx;">
					<view>排序</view>
					<u-number-box v-model="orederby">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="12"></u-icon>
						</view>
						<text slot="input" style="width: 50px;text-align: center;" class="input">{{orederby}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>
			<u-picker :show="show" @cancel="show=false" ref="uPicker" :columns="columns" @confirm="confirm"
				@change="changeHandler">
			</u-picker>
			<u-popup :show="popupshow" @close="close" @open="open" closeable="true" style="height:800rpx" size="25">
				<view style="height: 800rpx;">
					<view style="margin-left: 40rpx;margin-right: 40rpx;margin-top: 80rpx;">
						<u-radio-group v-model="status" placement="column" borderBottom="true" iconPlacement="right">
							<u-radio activeColor="red" name="私有" label="私有" labelSize="25px"></u-radio>
							<u-radio activeColor="red" name="公有" label="公有" labelSize="25px"></u-radio>
							<u-radio activeColor="red" name="部分好友" label="部分好友" labelSize="25px">
							</u-radio>
						</u-radio-group>
						<view style="margin-top: 30rpx;" v-if="status==='部分好友'">
							<u-search placeholder="请输入手机号" v-model="phone" @search="search()" @custom="search()">
							</u-search>
							<image v-for="(item,index) in list" :key="item.id" @click="remList(index)"
								:src="item.picUrl"
								style="border-radius: 50px;height: 60rpx;width: 60rpx;margin-top: 10rpx;margin-left: 10rpx;margin-right: 10rpx;border: solid 2px #ff0f0f;">
							</image>
							<u-gap height="5" bgColor="#bbb" v-if="list.length!==0"></u-gap>
							<image @click="addList()" :src="user.picUrl"
								style="border-radius: 50px;height: 60rpx;width: 60rpx;margin-top: 10rpx;margin-left: 10rpx;margin-right: 10rpx;">
							</image>
						</view>
						<view style="margin-top: 80rpx;">
							<u-button type="primary" text="确定" @click="popupshow=false"></u-button>
						</view>
					</view>

				</view>
			</u-popup>
			<view style="margin-top: 80rpx;">
				<u-button type="primary" text="确定" @click="newPicss()"></u-button>
			</view>

		</view>

	</view>
</template>

<script>
	import navbox from '../components/navbox/navbox.vue'
	export default {
		data() {
			return {
				tabList:[],
				status: '',
				user: '',
				list: [],
				phone: "",
				quan: '',
				popupshow: false,
				orederby: 1,
				pDesc: '',
				show: false,
				columns: [],
				columnData: []
			}
		},
		components: {
			"navbox": navbox
		},
		onLoad() {
			this.getListColumns()
		},
		methods: {
			async newPicss() {
				if(this.pDesc===null||this.pDesc===''){
					return uni.showToast({
						title:"请填写相册名称",
						icon:'none'
					})
				}
				const res2 = await this.$myRuquest({
					url: '/wexinLogin/pic/checkPicName?nickName='+this.pDesc,
					method: 'post'
				})
				if(res2.data.data===1){
					return uni.showToast({
						title:"相册名称已存在",
						icon:'none'
					})
				}
				if(this.status===null||this.status===''){
					return uni.showToast({
						title:"请选择权限",
						icon:'none'
					})
				}
				if(this.tabList.length===0){
					return uni.showToast({
						title:"请选择主题",
						icon:'none'
					})
				}
				const pics = {
					typeName: this.pDesc,
					status: this.status === "公有" ? "0" : "1",
					orederby: this.orederby,
					tabList: this.tabList,
					userId: uni.getStorageSync("user").id,
					users: this.list
				}
				const res = await this.$myRuquest({
					url: '/wexinLogin/pic/newPicss',
					method: 'post',
					data:pics
				})
				if(res.data.code===200){
					uni.redirectTo({
		
						url:'/pagesa/loadPicture/loadPicture'
					})
				}else{
					uni.showToast({
						title:"系统错误，联系管理员",
						icon:'none'
					})
				}
			},
			remList(index) {
				this.list.splice(index, 1)
			},
			addList() {
				if (this.list.indexOf(this.user) === -1) {
					this.list.push(this.user)
				}

				console.log()
			},
			async search() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pic/getUserByPhone?phone=' + this.phone,
					method: 'post',
				})
				this.user = res.data.data
				console.log(res)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.popupshow = false
				// console.log('close');
			},
			quanxian() {
				this.user = ''
				this.list = []
				this.phone = ''
				this.popupshow = true
			},
			async getListColumns() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/pic/newPrcs',
					method: 'post',
				})
				this.columns = res.data.data.columns
				this.columnData = res.data.data.columnData
				console.log(res)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}

			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.tabList=e.value
				this.show = false
			}
		}

	}
</script>

<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
